<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
<!--    <meta charset="UTF-8" />-->
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Spitter</title>
    <link rel="stylesheet" type="text/css" th:href="@{/resources/style.css}" />
</head>
<body>
    <!-- <form> 标签现在将 enctype 属性设置为 multipart/formdata，这会告诉浏览器以 multipart 数据的形式提交表单，而不是以表单数据的形式进行提交。 -->
    <form method="post" th:object="${spitter}" action="/spitter/register1" enctype="multipart/form-data">
        <div class="errors" th:if="${#fields.hasErrors('*')}">
            <ul>
                <li th:each="err : ${#fields.errors('*')}" th:text="${err}">Input is incorrect</li>
            </ul>
        </div>
        <label th:class="${#fields.hasErrors('firstName')}?'error'">First Name</label>：
        <input type="text" th:field="*{firstName}" th:class="${#fields.hasErrors('firstName')}? 'error'" /><br/>
        <label th:class="${#fields.hasErrors('lastName')}? 'error'">Last Name</label>：
        <input type="text" th:field="*{lastName}" th:class="${#fields.hasErrors('lastName')}? 'error'" /><br/>
        <label th:class="${#fields.hasErrors('username')}? 'error'">Username</label>：
        <input type="text" th:field="*{username}" th:class="${#fields.hasErrors('username')}? 'error'" /><br/>
        <label th:class="${#fields.hasErrors('password')}? 'error'">Password</label>：
        <input type="password" th:field="*{password}" th:class="${#fields.hasErrors('password')}? 'error'" /><br/>
        <label>Profile Picture</label>:
        <!-- accept 属性用来将文件类型限制为 JPEG、 PNG 以及 GIF 图片。根据其 name 属性，图片数据将会发送到 multipart 请求中的 profilePicture part 之中 -->
        <input type="file" name="profilePicture" accept="image/jpeg,image/png,image/gif" /><br/>
        <input type="submit" value="Register" />
    </form>
</body>
</html>